<script setup lang="ts">
import { ref, watch, toRaw } from 'vue';
import { useRoute } from 'vue-router';
import { MainLayout } from '@/layouts/index';
const route = useRoute();
const isLayout = ref(true);

const frameOut = ['Login']; // layout布局 框架之外 完全自主布局
watch(
  () => route,
  (nextState: any) => {
    // console.log('route', toRaw(nextState));
    isLayout.value = !frameOut.includes(nextState.name);
  },
  { deep: true },
);
</script>

<template>
  <!-- 非layout布局页面 如 login 等 -->
  <router-view v-if="!isLayout" class="router-container" v-slot="{ Component }">
    <component :is="Component" />
  </router-view>
  <MainLayout v-else />
</template>

<style scoped></style>
